<template>
    <div v-loading="pageLoading">
        <el-form label-width="100px" size="small" class="form_box" :label-position="'top'">
        <el-row :gutter="40">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="商品标签">
                    <el-select size="small" v-model="storeTags" multiple placeholder="请选择商品标签" filterable clearable :value-key="'label'" class="full-width">
                        <el-option v-for="item in storeTagDataList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="初始销量">
                    <el-input-number class="full-width" size="small" :controls="false" v-model.trim="storeInitCount" placeholder="请输入初始销量" :precision="0" :min="0" @keydown.native="inputNoneNumberUnpass"></el-input-number>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="40">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"><h4>分享设置</h4></el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="是否允许分享">
                    <el-switch size="small" v-model="storeIsShared"></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="40">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"><h4>分销设置</h4></el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="是否允许分销">
                    <el-switch size="small" v-model="storeIsSaled"></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="40">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <h4>建议渠道 <span class="font-size--sm text-gray font-weight--sm">商品会优先展示在选中渠道</span></h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item>
                    <el-select v-model="storeChannel" multiple filterable placeholder="请选择">
                        <el-option v-for="(childItem, childIndex) in storeChannelDataList" :key="childIndex" :label="childItem.channelName" :value="childItem.id">{{childItem.channelName}}</el-option>
                    </el-select>
                    <!-- <el-checkbox-group v-model="storeChannel">
                        <el-checkbox border v-for="(childItem, childIndex) in storeChannelDataList" :key="childIndex" :label="childItem.id">{{childItem.channelName}}</el-checkbox>
                    </el-checkbox-group> -->
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="商品资料包">
                    <app-uploader-zip title="资料包" :limit="1" :fileFormat="fileFormat" @success="filesSuccessOption($event)" ref="uploadRef" v-show="pageData.length < 10"></app-uploader-zip>
                </el-form-item>

                <el-table stripe :data="pageData" :header-cell-style="tableHeaderStyle" v-loading="loading" class="margin_top_20" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="42"></el-table-column>
                    <el-table-column type="index" label="序号"></el-table-column>
                    <el-table-column prop="originalFilename" label="资料">
                        <template slot-scope="scope">
                            <span class="text-brand">{{scope.row.originalFilename}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="creatorId" label="上传人"></el-table-column>
                    <el-table-column prop="createTime" label="上传时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="fileDownload([baseUrl + scope.row.url])">下载</el-button>
                            <el-button size="mini" type="danger" @click="fileRemove([scope.row.id])">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="margin_top_10" v-show="pageData.length">
                    <el-button size="small" @click="allFileDownload()">下载</el-button>
                    <el-button size="small" type="danger" @click="allFileRemove()">删除</el-button>
                </div>
            </el-col>
        </el-row>
        <!-- <el-row :gutter="40">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="上下架">
                    <el-switch size="small" v-model="autoPublish"></el-switch>
                </el-form-item>
            </el-col>
        </el-row> -->
    </el-form>
    </div>
</template>

<script>
import Setting from '@/settings';
import AppUploaderZip from '@/components/AppUploaderZip/index';
import { GetDepartmentChannelAll } from '@/views/user-management/services/index';
import { GetStoreTagAllListByParams, GetGoodsZipList, InsertGoodsZipList, UpdateGoodsZipList, GetMerchantChannelAll } from '@/views/store-management/services/index';

export default {
    components: {
        AppUploaderZip
    },
    props: ['storeId', 'detail'],
    data() {
        return {
            // 基本数据支持
            storeTags: [],
            storeInitCount: parseInt(Math.random() * 50),
            storeIsShared: false,
            storeIsSaled: false,
            // autoPublish: true,
            storeChannel: [],
            storeTagDataList: [],
            storeChannelDataList: [],
            fileFormat: ['zip'],
            tableHeaderStyle: Setting.tableHeaderStyle,
            pageData: [],
            loading: false,
            pageLoading: false,
            multipleSelection: [],
            baseUrl: process.env.VUE_APP_FILE_URL + '/'
        }
    },
    watch: {
        detail: {
            immediate: true,
            handler(newValue) {
                console.log(newValue)
                if (!newValue) return;
                this.storeInitCount = newValue.initVolume ? newValue.initVolume : parseInt(Math.random() * 50);
                this.storeIsShared = !!newValue.isShare;
                this.storeIsSaled = !!newValue.isDistribution;
                // this.autoPublish = !!newValue.shelvesStatus;
                this.storeChannel = newValue.channelList.map(item => item.id);
                this.storeTags = newValue.tagEntityList.map(item => item.id);
            }
        }
    },
    activated() {
        this.getStoreTagList();
        this.getChannelList();
        this.getPageData();
    },
    mounted() {
        this.$nextTick(() => {
        const numberInputList = document.querySelectorAll('.el-input-number input.el-input__inner');
        numberInputList.forEach(item => {
            item.type = 'number';
        })
        })
    },
    methods: {
        allFileRemove() {
            if (!this.multipleSelection || !this.multipleSelection.length) {
                this.$message.warning('请选择需要删除的资源包!');
                return;
            }
            this.fileRemove(this.multipleSelection.map(item => item.id));
        },
        fileRemove(nodeIds) {
            this.$confirm('此操作将永久删除资源包, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                closeOnClickModal: false,
                closeOnPressEscape: false,
                type: 'warning',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        UpdateGoodsZipList({ ids: nodeIds })
                        .then(data => {
                            instance.confirmButtonLoading = false;
                            if (data.code == 200) {
                                this.$message.success('删除成功!');
                                done()
                            } else {
                            this.$message.success('删除失败!');
                            }
                        })
                        .catch(error => {
                            instance.confirmButtonLoading = false;
                        })
                    } else {
                        done();
                    }
                }
            }).then(() => {
                this.getPageData();
            })
        },
        allFileDownload() {
            if (!this.multipleSelection || !this.multipleSelection.length) {
                this.$message.warning('请选择需要下载的资源包!');
                return;
            }
            this.fileDownload(this.multipleSelection.map(item => this.baseUrl + item.url));
        },
        fileDownload(files) {
            this.filesDownload(files);
        },
        handleSelectionChange(selectlist) {
            this.multipleSelection = selectlist;
        },
        filesSuccessOption(event) {
            if (!event || !event.length) return;
            this.pageLoading = true;
            const queryData = {
                id: this.storeId, // 商品id	
                zips: event.map(item => {
                    return {
                        url: item.fileUrl,
                        originalFilename: item.originalFilename
                    }
                }),
                type: 1
            }
            InsertGoodsZipList(queryData)
            .finally(() => this.pageLoading = false)
            .then(data => {
                if (data.code == 200) {
                    this.$message.success('添加成功!');
                    this.getPageData();
                } else {
                    this.$message.error('添加失败!');
                }
            })

            this.$refs.uploadRef.fileList = [];
        },
        getStoreTagList() {
            GetStoreTagAllListByParams()
            .then(data => {
                this.storeTagDataList = data.data.map(item => {
                    item.value = item.id;
                    item.label = item.name;
                    return item;
                });
            })
        },
        getChannelList() {
            switch (this.$store.getters.userRole.toString()) {
                case '0':
                    GetDepartmentChannelAll({ type: 0, status: 1, proId: 4, depId: this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).depId : '0' })
                    .then(data => {
                        this.storeChannelDataList = data.data;

                        if (this.detail && this.detail.channelList && this.detail.channelList.length) {
                            this.storeChannel = this.detail.channelList.map(item => item.id);
                        } else {
                            this.storeChannel = data.data.map(item => item.id);
                        }
                    })
                    break;
                case '1':
                    GetMerchantChannelAll()
                    .then(data => {
                        this.storeChannelDataList = data.data;
                        if (this.detail && this.detail.channelList && this.detail.channelList.length) {
                            this.storeChannel = this.detail.channelList.map(item => item.id);
                        } else {
                            this.storeChannel = data.data.map(item => item.id);
                        }
                    })
                    break;
                case '2':
                    GetStoreChannelAll()
                    .then(data => {
                        this.storeChannelDataList = data.data;

                        if (this.detail && this.detail.channelList && this.detail.channelList.length) {
                            this.storeChannel = this.detail.channelList.map(item => item.id);
                        } else {
                            this.storeChannel = data.data.map(item => item.id);
                        }
                    })
                    break;
                default:
                    break;
            }
        },
        getPageData() {
            this.loading = true;
            GetGoodsZipList({type: 1, id: this.storeId})
            .finally(() => this.loading = false)
            .then(data => {
                this.pageData = data.data;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.form_box {
    max-width: 1064px;
    // padding: 0 100px;
    box-sizing: content-box;
}

::v-deep .el-input-number .el-input__inner {
    text-align: left;
    line-height: 1px !important;
}
</style>
